<template>
  <div class="padding flex direction-column">
    <div class="search-form">
      <el-form inline>
        <year-month-picker v-model="time"></year-month-picker>
        <el-form-item label="区域">
          <area-picker v-model="area"></area-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="border-radius">
      <el-radio-group v-model="type">
        <el-radio-button
          v-for="option in typeOptions"
          :key="option.value"
          :label="option.value"
        >
          {{ option.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="bg-white border-radius margin-top">
      <div class="info-head">{{ typeText }}趋势分析</div>
      <div class="info-content">
        <v-chart
          :option="chartOption"
          style="width: 100%; height: 400px"
        ></v-chart>
      </div>
    </div>
    <div class="bg-white border-radius margin-top">
      <div class="info-head">{{ typeText }}详情</div>
      <div class="info-content padding">
        <el-table
          v-loading="loading"
          :data="lists"
          height="300px"
          :header-cell-style="{
            backgroundColor: themeColor,
            color: 'white'
          }"
        >
          <el-table-column
            v-for="column in columns"
            :key="column.prop"
            v-bind="column"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import AreaPicker from '@/components/area-picker';
import TimePicker from '@/mixins/time-picker';

export default {
  name: 'energy-efficiency-analysis-exception',
  components: {
    AreaPicker
  },
  mixins: [TimePicker],
  data() {
    return {
      area: '',
      type: '1',
      typeOptions: [
        { name: '综合能源消费量', value: '1' },
        { name: '用电量', value: '2' },
        { name: '用气量', value: '3' },
        { name: '万元产值单耗', value: '5' },
        { name: '能源消费总量', value: '6' }
      ],
      loading: false,
      lists: [],
      columns: [
        { label: '时间', prop: 'col1' },
        { label: '本期值（万吨标准煤）', prop: 'col2' },
        { label: '同期值（万吨标准煤）', prop: 'col3' },
        { label: '正常上限（万吨标准煤）', prop: 'col4' },
        { label: '正常下限（万吨标准煤）', prop: 'col5' }
      ]
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    },
    qs() {
      return {
        time: this.time,
        area: this.area,
        type: this.type
      };
    },
    districts() {
      return this.$store.getters['user/districts'];
    },
    typeText() {
      const type = this.type;
      const options = this.typeOptions;
      const target = options.find(v => v.value === type);
      return target ? target.name : '';
    },
    chartOption() {
      // TODO
      const months = [
        '2022-10',
        '2022-11',
        '2022-12',
        '2023-1',
        '2023-2',
        '2023-3',
        '2023-4'
      ];
      const lines = this.columns.slice(1).map(v => v.label);
      return {
        legend: {
          left: 'center',
          bottom: '5%'
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '24%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: months
        },
        yAxis: {
          type: 'value',
          name: '万吨标准煤'
        },
        series: [
          ...lines.map(v => ({
            type: 'line',
            smooth: true,
            name: v,
            data: months.map(() => Math.round(Math.random() * 99 + 1))
          }))
        ]
      };
    }
  },
  watch: {
    type() {
      this.getLists();
    }
  },
  mounted() {
    this.$store.dispatch('user/getDistrictsList');
    this.getLists();
  },
  methods: {
    getLists() {
      this.loading = true;
      // TODO
      return new Promise(resolve => {
        setTimeout(() => {
          resolve();
          this.loading = false;
          this.lists = [
            ...['2023-2', '2023-3', '2023-4'].map(v => ({
              col1: v,
              col2: Math.round(Math.random() * 99 + 1),
              col3: 0,
              col4: 0,
              col5: 0
            }))
          ];
        }, 300);
      });
    },
    onSearch() {}
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/variable.scss';

.info-head {
  padding: 20px $gutter 0 $gutter;
  font-size: 16px;
}
</style>
